<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/css/bootstrap/bootstrap-theme.min.css">
<link rel="stylesheet" href="/css/bootstrap/bootstrap-select.min.css">
<link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
<style type="text/css">
	html,body,#app{
		height: 100%;
	}
	.height95{
		height: 95%;
	}
	.height100{
		height: 100%;
	}
</style>
</head>
<body>
	<div id="app"  class="container-fluid">
	
		<div class="row">
			<div class="col-xs-9">
				<form class="form-inline">
				  <div class="form-group">
				    <label for="exampleInputName2">选择库</label>
				    <select v-model="selectSchema" class="selectpicker show-tick form-control" data-live-search="true" v-on:change="selectSchemaFun()">
						<option>选择库</option>
						<option v-bind:value="schemata" v-for="(schemata, index) in schematas" >{{schemata.schemaName}}</option>
					</select>
				  </div>
				  <div class="form-group">
				    <label for="exampleInputName2">选择表</label>
				    <select id="tableElment" v-model="selectTable" class="selectpicker show-tick form-control" data-live-search="true" v-on:change="select()">
						<option>选择表</option>
						<option v-bind:value="table" v-for="(table, index) in tables" >{{table.tableName}}</option>
					</select>
				  </div>
				  <div class="form-group">
				    <label for="exampleInputName2">执行条数</label>
				    <input class="form-control" type="number" v-model="number">
				  </div>
				  <button type="button" class="btn btn-default" v-on:click="save">保存</button>
				  <button type="button" class="btn btn-default" v-on:click="execute">执行</button>
				  
				   <div class="form-group" style="float: right;">
				    <label for="exampleInputName2">选择配置文件</label>
				    <select v-model="selectFile" class="selectpicker show-tick form-control" data-live-search="true" v-on:change="selectFileFun($event)">
						<option>选择配置文件</option>
						<option v-bind:value="file.path" v-for="(file, index) in files" >{{file.name}}</option>
					</select>
				  </div>
				</form>
			</div>
		</div>
		<div class="row height95">
			<div class="col-xs-12 height100">
				<div class="table-responsive height100">
					<table class="table" style="width: 100%">
						<thead  style="width: 100%">
							<tr  style="width: 100%">
								<th width="20%">列名</th>
								<th width="10%">数据类型</th>
								<th width="10%">键</th>
								<th width="30%">备注</th>
								<th width="10%">处理器</th>
								<th width="20%">参数</th>
							</tr>
						</thead>
						<!-- v-if="" -->
						<tbody  style="width: 100%">
							<tr v-for="(column, index) in columns"  style="width: 100%">
								<td width="20%">{{column.columnName}}</td>
								<td width="10%">{{column.columnType}}</td>
								<td width="10%">{{column.columnKey}}</td>
								<td width="30%">{{column.columnComment}}</td>
								<td width="10%">
									<select class="form-control"  data-live-search="true" v-on:change="processSelect($event, index)">
										<option>选择处理器</option>
										<option v-bind:value="index" v-bind:selected="column.process!=null?pro.name==column.process.name:false" v-for="(pro, index) in process">{{pro.name}}</option>
									</select>
								</td>
								<td width="20%" :id="column.columnName"><!--  v-html="column.html" -->
									<div v-if="column.process != undefined" >
										<div v-for="(html, htmlIndex) in column.process.html">
											
											<!-- <input v-bind:type="html.type" v-bind:placeholder="html.name" v-model="html.value" class='form-control'> -->
											<p :htmlType = "html.type" :columnindex="index" :value="html.value" :htmlindex="htmlIndex" v-if="html.type === 'customize'" v-html="html.customize"></p>
											<p v-if="html.type != 'select' && html.type != 'customize'">
												<input v-bind:type="html.type" v-bind:placeholder="html.name" v-model="html.value" class='form-control'>
											</p>
											<p v-if="html.type == 'select' && html.name == '选择相同值列'">
												<select v-model="html.value" class="" data-live-search="true">
													<option v-for="(localColumn, localIndex) in columns" v-bind:value="localColumn.columnName">{{localColumn.columnName}}</option>
												</select>
											</p>
										</div>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="/js/jQuery.js"></script>
<script type="text/javascript" src="/js/vue/vue.min.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap-select.min.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/page/index.js"></script>
</html>